<template>
  <div>
    <div class="flex-box bt fw">
      <span class="flex-item opr"></span>
      <span class="flex-item">{{
        $t("workFlow.userButtonSetting.tableOperate")
      }}</span>
      <span class="flex-item">{{
        $t("workFlow.userButtonSetting.tableApiAddress")
      }}</span>
      <span class="flex-item">{{
        $t("workFlow.userButtonSetting.tableRequestWay")
      }}</span>
      <span class="flex-item"></span>
    </div>
    <div class="bt">
      <div class="flex-box bt">
        <span class="flex-item opr"></span>
        <span class="flex-item opr" @click="addApiParams()">{{
          $t("workFlow.userButtonSetting.addParameterBtn")
        }}</span>
        <span class="flex-item">
          <el-input v-model="iframeData.apiUrl"></el-input>
        </span>
        <span class="flex-item">
          <el-select v-model="iframeData.method">
            <el-option label="post" value="post"></el-option>
            <el-option label="get" value="get"></el-option>
          </el-select>
        </span>
      </div>
      <div>
        <div v-if="iframeData.params.length > 0">
          <div class="flex-box bt fw">
            <span class="flex-item"></span>
            <span class="flex-item"></span>
            <span class="flex-item">{{
              $t("workFlow.userButtonSetting.tablePName")
            }}</span>
            <span class="flex-item">{{$t('parameterType')}}</span>
            <span class="flex-item">{{
              $t("workFlow.userButtonSetting.tablePValue")
            }}</span>
          </div>
          <div
            class="flex-box bt"
            v-for="(sbuItem, subIndex) in iframeData.params"
            :key="subIndex"
          >
            <span class="flex-item"></span>
            <span class="flex-item opr" @click="delApiParams(subIndex)">{{
              $t("tableOperationModule.deleteBtn")
            }}</span>
            <span class="flex-item"
              ><el-input v-model="sbuItem.name"></el-input
            ></span>
            <span class="flex-item">
              <el-select v-model="sbuItem.type">
                <el-option :label="$t('workFlow.zh.value')" value="value"></el-option>
                <el-option :label="$t('workFlow.zh.config')" value="config"></el-option>
              </el-select>
            </span>
            <span class="flex-item">
              <el-input
                v-if="sbuItem.type == 'value'"
                v-model="sbuItem.value"
              ></el-input>
              <el-input
                v-else
                v-model="sbuItem.params"
                :placeholder="$t('setParameterValue')"
                suffix-icon="el-icon-more"
                @focus="openApiDialog(subIndex)"
              ></el-input>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div>
       <span class="tips">{{$t('returnJsonFormatExample')}}：{"code":0,"success":true,"msg":"","data":"value"}；{{$t('returnJsonFormatExampleMore')}}</span>
    </div>
    <el-dialog
      v-dialogDrag
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="80%"
      append-to-body
      :close-on-click-modal="false"
      @closed="closeDialog"
    >
      <ApiRules
        v-if="dialogVisible"
        :ruleNameList.sync="apiParamsTemplateData"
        :ruleTreelist="apiRuleTreelist"
        :ruleTip="apiRuleTip"
      ></ApiRules>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">{{
          $t("buttonModule.modalCancelBtn")
        }}</el-button>
        <el-button size="small" type="primary" @click="submitDialog">{{
          $t("buttonModule.modalSureBtn")
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ApiRules from "./../../ApiRulesConfig";
import { scriptApiRuleTip, scriptApiTasksTree } from "./../../../../data/rules";
export default {
  components: {
    ApiRules
  },
  props: {
    apiConfig: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      iframeData: {
        apiUrl: "",
        method: "",
        params: []
      },
      dialogTitle: "",
      dialogVisible: false,
      editApiSubIndex: -1,
      apiRuleTreelist: scriptApiTasksTree,
      apiRuleTip: scriptApiRuleTip,
      apiParamsTemplateData: []
    };
  },
  created() {
    if (this.apiConfig && this.apiConfig.apiUrl) {
      this.iframeData.apiUrl = this.apiConfig.apiUrl
        ? this.apiConfig.apiUrl
        : "";
    }
    if (this.apiConfig && this.apiConfig.method) {
      this.iframeData.method = this.apiConfig.method
        ? this.apiConfig.method
        : "";
    }
    if (
      this.apiConfig &&
      this.apiConfig.params &&
      Array.isArray(this.apiConfig.params)
    ) {
      this.iframeData.params = this.apiConfig.params
        ? this.apiConfig.params
        : [];
    }
  },
  methods: {
    addApiParams() {
      let defaultJson = {
        name: "",
        templateData: [],
        params: "",
        value: "",
        type: "value"
      };
      this.iframeData.params.push(defaultJson);
    },
    delApiParams(subindex) {
      if (this.iframeData.params.length > 0) {
        this.iframeData.params.splice(subindex, 1);
      }
    },
    openApiDialog(subIndex) {
      this.dialogTitle = this.$t("workFlow.userButtonSetting.apiConfigTitle");
      this.editApiSubIndex = subIndex;
      this.apiParamsTemplateData = this.iframeData.params[
        subIndex
      ].templateData;
      this.dialogVisible = true;
    },
    submitDialog() {
      let subIndex = this.editApiSubIndex;
      this.iframeData.params[
        subIndex
      ].templateData = this.apiParamsTemplateData;
      this.iframeData.params[subIndex].params = this.apiParamsTemplateData
        .map(element => {
          return element.name;
        })
        .join(".");
      this.$notify({
        title: this.$t("deletePrompt.promptTitle"),
        message: this.$t("workFlow.userButtonSetting.hintAddPValueSuccess"),
        type: "success"
      });
      this.closeDialog();
    },
    closeDialog() {
      this.dialogVisible = false;
    },
    getConfig() {
      return this.iframeData;
    }
  }
};
</script>

<style lang="scss" scoped>
.flex-box {
  display: flex;
  .flex-item {
    flex-basis: 18%;
    line-height: 40px;
    height: 40px;
    margin-left: 1%;
    margin-right: 1%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.bt {
  border-bottom: 1px solid #e4e4e4;
}
.fw {
  font-weight: 700;
}
.opr {
  color: #02a7f0;
  cursor: pointer;
}
.tips{
  color:#0063f5;
}
</style>
